<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%">
      <span>确认要删除该条数据吗?</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleClose">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <div class="search">
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="商家名称">
              <el-input v-model="searchObject.name" placeholder="商家名称" name="name">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" style="padding: 0 8px;">
            <el-form-item label="联系电话">
              <el-input v-model="searchObject.phone" placeholder="联系电话" name="phone">
              </el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12" style="padding: 0 10px">
            <el-row type="flex" justify="end">
              <el-button type="primary" @click="search">搜索</el-button>
              <el-button plain @click="clearSearch">清除条件</el-button>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="data-content">
      <div class="tool-add">
        <el-button type="primary" @click="addView">新增</el-button>
      </div>

      <el-table v-loading="loading" :data="pageData.data" @sort-change="changeTableSort"
                style="width: 100%;font-size: 12px;">
        <el-table-column label="商家名称" prop="name"   width="200" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商家分类" prop="catalogName"   width="100">
        </el-table-column>
        <el-table-column label="联系电话" prop="phone"  width="120" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="是否上线" prop="stateName" width="100"  >
        </el-table-column>
        <el-table-column label="创建时间" prop="add_date">
        </el-table-column>
        <el-table-column width="260" align="center" fixed="right" label="操作">
          <template #default="scope">
            <el-switch v-model="scope.row.state" :active-value="1" :inactive-value="-1"
                       active-text="已上线"
                       inactive-text="已下线"
                       inline-prompt
                       @change="updateShopState(scope.row)"/>
            <el-button text size="small" class="operation_bt" :icon="Edit" type="info"
                       @click="showView(scope.row)">详情
            </el-button>

            <el-button text size="small" class="operation_bt" :icon="Edit" type="primary"
                       @click="editView(scope.row)">
              编辑
            </el-button>

            <el-button text  class="operation_bt" type="danger" size="small"
                       style="cursor: pointer;"
                       @click="deleteData(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination background :current-page="searchObject.no" :page-sizes="[10, 20, 50, 100]"
                       :page-size="pageData.size" :pager-count="5"
                       layout="total, sizes, prev, pager, next, jumper" :page-count="pageData.totalPage"
                       :total="pageData.total" @size-change="sizeChange" @current-change="pageChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script setup>
import {defineStore} from 'pinia'
import {useView} from "@/utils/useView";
import {usePageData} from "@/uses/usePageData";
import {ref} from "vue";
import {Edit} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {postData} from "@/uses/handleData";

const selectDate = ref({});
const dialogVisible = ref(false);
const deleteRow = ref(null);

const searchStore = defineStore('shop', {

  state: () => {
    return {
      searchObject: {
        no: 1,
        size: 30,
        sortField: "id",
        sortMethod: "desc",
        name: null,
        phone: null,
      }
    }
  }
})

const {searchObject} = searchStore();

const clearSearch = () => {
  searchObject.shop = null;
  searchObject.store = null;
  searchObject.customer = null;
  searchObject.orderState = null;
  searchObject.customerName = null;
  searchObject.customerPhone = null;
  searchObject.date1 = null;
  searchObject.date2 = null;
  selectDate.value=null;
}
const {pageData, sizeChange, pageChange,searchList, search, changeTableSort, loading} = usePageData("shop_list", searchObject);
const {showView, addView, editView} = useView();

const updateShopState = async (row) => {
  try {
    // 这里可以调用API来更新商家状态
    // 示例API调用（需要根据实际的API接口进行调整）
    // await updateShopStateApi(row.id, row.state);
    let  param={
      id:row.id,
      state:row.state
    }
    let res=await postData("shop_update_state", param);

    if (res.code!==200){
      ElMessage.error( res.msg);
      return;
    }
    await searchList()
    // 显示成功消息
    ElMessage.success('商家状态更新成功');

    // 可选：重新加载数据
    // search();
  } catch (error) {
    // 如果更新失败，恢复原来的状态
    row.state = row.state === '1' ? '-1' : '1';
    ElMessage.error('商家状态更新失败：' + (error.message || '未知错误'));
  }
};

const searchData = () => {
  search();
}

const deleteData = (row) => {
  deleteRow.value = row;
  dialogVisible.value = true;
}

const handleClose = async () => {
  dialogVisible.value = false;
  if (deleteRow.value) {
    try {
      let res = await postData("shop_delete", {id: deleteRow.value.id});
      if (res.code === 200) {
        await searchList();
        ElMessage.success('商家删除成功');
      } else {
        ElMessage.error(res.msg);
      }
    } catch (error) {
      ElMessage.error('商家删除失败：' + (error.message || '未知错误'));
    }
  }
}

</script>

<style scoped>

</style>
